<!DOCTYPE html>
<html lang="zh-cn">
<!-- 横向两个div，左边div宽度固定，右边div宽度自适应，使用flex方式实现 -->
<!-- 另一种样式 -->

<head>
	<meta charset="utf-8" />
	<title>测试</title>
	<style>
		body {
			background-color: cadetblue;
		}

		.outer {
			display: flex;
			border: 1px solid #ebeef3;
			border-radius: 3px;
			height: 300px;
		}

		.left {
			display: flex;
			flex-direction: column;
			width: 200px;
			/* box-shadow: 1px 0 0 #ebeef3; */
			border-right: 1px solid #ebeef3;
			padding: 20px;
		}

		.right {
			display: flex;
			flex-direction: column;
			flex: 1;
			padding: 20px;
		}

		header {
			margin-bottom: 20px;
		}

		section{
			background-color: salmon;
			flex: 1;
		}
	</style>
</head>

<body>
	<div class="outer">
		<div class="left">
			<header>码表目录</header>
			<section></section>
		</div>
		<div class="right">
			<header>码值</header>
			<section></section>
		</div>
	</div>



</body>

</html>